<template>
    <div class="container-middle">
        <el-tabs
            class="editor-profile"
            tab-position="left"
            v-model="activeName"
            @tab-click="handleClick">
            <el-tab-pane v-for="item in tabsOptions" :label="item.label" :name="item.name">
                <!-- <el-breadcrumb style="margin-bottom: 15px; font-weight: 700; font-size: 18px;" separator-icon="icon-home"> -->
                <el-breadcrumb class="breadcrumb-warp">
                    <el-breadcrumb-item
                        :to="`/user/${useMyInfo.id}/article`">
                        返回个人信息
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>{{ item.label }}</el-breadcrumb-item>
                </el-breadcrumb>
                <RouterView :name="item.name"></RouterView>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { TabsPaneContext } from 'element-plus'
import useStore from '@/store'
const route = useRoute()
const router = useRouter()
const { user } = useStore()
const { useMyInfo } = user

// 结构获取动态路由中的params参数
const routerParams = computed(() => route.params as unknown as RouterParams)
const { pageValue } = routerParams.value

// 子路由tabs
const tabsOptions = [
    { label: '个人资料', name: 'info' },
    { label: '设置账号', name: 'account' },
    { label: '修改密码', name: 'password' },
    { label: '隐私设置', name: 'privacy' },
    { label: '屏蔽管理', name: 'block' }
]

// 点击tabs切换路由
const activeName = ref<string>(pageValue || 'info')
const handleClick = (tab: TabsPaneContext) => {
    router.push({
        path: `/user/editor/${tab.props.name}`
    })
}
</script>

<style lang="less" scoped>
.editor-profile {
    width: 100%;
    height: 600px;
    min-height: 600px;
    --el-tabs-header-height: 30px;
    :deep(.el-tabs__nav-wrap) {
        margin-right: 0;
        &:after{
            display: none;
        }
        .el-tabs__nav {
            background-color: var(--color-white);
            border-radius: 10px;
            padding: 15px 0;
            .el-tabs__active-bar {
                left: 0;
                height: 30px!important;
                width: 3px;
            }
            .el-tabs__item {
                margin: 5px 0;
                font-size: var(--font-size-medium-x);
                color: var(--color-text-l);
                &.is-active {
                    color: var(--color-primary);
                }
            }
        }
    }
    :deep(.el-tabs__content) {
        background-color: var(--color-white);
        border-radius: 10px;
        padding: 30px;
        height: 100%;
    }
    .breadcrumb-warp {
        margin-bottom: 30px;
        font-weight: 700;
        color: var(--color-text-p);
    }
}
</style>